import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Button,Row,Col,Layout, Breadcrumb,Icon,Form,Input,message,Steps} from 'antd';
// import reqwest from 'reqwest';
// import {reqwest_get} from '../../utils/Reqwest.js'
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import acct from './Acct.less'
import {numvail,selectvail} from '../../utils/Validator.js'
// import { Editor } from 'react-draft-wysiwyg'
import {reqwest_get,reqwest_post} from '../../utils/Reqwest.js'
// import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import {datevali_deta} from '../../utils/Validator.js'

import AcctList from './AcctOrder/list.js'
import AcctSave from './AcctOrder/Save.js'
const Step = Steps.Step;
const FormItem = Form.Item;
let _step = {
	'新订单':1,
	"预约测量":2,
	'已测量':3,
	'预约安装':4,
	'已安装':5,
	'完成交易':6
}
class AcctOrder extends React.Component{
	constructor(props){
		super(props);
		this.state={
			loading:false,
			data:[],
			// list:JSON.parse(window.localStorage['clues']),
			contentState:undefined,
			list:{},
			order:{},
			_node:undefined,
			// details:JSON.parse(window.sessionStorage['details'])
		}
	}
	fetch(){
		let _this=this;
		let _data;
		reqwest_get('/api/strategy_results/'+this.props.location.query.usr,{
			access_token:window.localStorage['token'],
			// id:
		},(data)=>{
			if(data.status==='success'){
				_data=[{text:'订单号',value:data.sr.order.serial_number},{text:'面积',value:data.sr.order.square},
        {text:"预约测量时间",value:data.sr.order.booking_date},{text:'订单所有者',value:data.sr.order.owner_name},
        {text:'安装费/测量费（￥）',value:data.sr.order.total+'/'+data.sr.order.measure_amount},
        {text:"产品价格",value:data.sr.order.estimated_total},{text:'渠道',value:data.sr.order.region_name},
        {text:'门店',value:data.sr.order.store_name}]
				this.setState({
					data:_data,
					list:data.sr,
					order:data.sr.order
				})
			}
		})
	}
	componentWillMount(){
		// console.log(this)
		this.fetch()
	}
	postServer(params={}){

  }
  callback(aa,that){
  	// console.log(aa)
  	// console.log(that)
  	that.setState({
				list:aa,
				// order:aa.sr.order
  	})
  	
  }
	render(){
		// console.log(this.state.list)
		// let 
		const _url={
			list:<AcctList current={this.props.location.query.current} list={this.state.list} loading={this.state.loading} save={this.props.location.query} />,
			save:<AcctSave save={this.props.location.query} current={this.props.location.query.current} event={this} callback={this.callback} list={this.state.list} loading={this.state.loading} />
		}
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      // style:{minWidth:200}
    };
    const {list,order,data} =this.state;
    // const _remark = JSON.parse(list.remark)
  	const {getFieldDecorator}=this.props.form;
  	const _dataNode = this.state.data.map((data,index)=>{
     return <Col key={index} span={10}>
				<span>{data.text}：
				</span>
				<span>
					{data.value}
				</span>
			</Col>
    })

		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/acctor',query:{current:this.props.location.query.current}}}>订单</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>订单详情</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff',padding:'24px 25px 0px'}}>
				<Row >
					<Col style={{fontSize:18}} span={4}>
						订单进度
					</Col>
					<Col span={20}>
						<Steps size="small" current={_step[order.workflow_state]}>
					    <Step title="新订单"  />
					    <Step title="预约测量" />
					    <Step title="已测量" />
					    <Step title="预约安装" />
					    <Step title="已安装" />
					    <Step title="完成交易" />
			  		</Steps>
			  	</Col>
				</Row>
					<Row className={`${acct.acct_list}`}>
						{_dataNode}
						{_url[this.props.location.query.typ]}
          </Row>
			</Layout>
			</Layout>
		)
	}
}
       		//<Row>
       	//		<Col span={8}>
					//		<FormItem  {...formItemLayout} label='历史备注'>
     			//			{this.state._node}
     		//			</FormItem>
     		//		</Col>
				//	</Row>
const AcctOrderForm = Form.create()(AcctOrder);
AcctOrder.contextTypes = {
  router: PropTypes.object
};
export default connect()(AcctOrderForm);